<template>
  <div class="home-box">
    <div class="screen">
      <screen-full />
    </div>

    <!-- 下拉框 -->
    <div class="selects">
      <div class="box1">
        <el-select 
          class="aa"
          v-model="port"
          placeholder="请选择"
          style="width: 230px"
        >
          <el-option
            v-for="item in portList"
            :key="item.value"
            :label="item.value"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>

      <div class="box2">
        <el-select
          class="bb"
          v-model="bote"
          placeholder="请选择"
          style="width: 230px"
        >
          <el-option
            v-for="item in boteList"
            :key="item.value"
            :label="item.value"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>

      <div class="box3">
        <el-select
          class="cc"
          v-model="win"
          placeholder="请选择"
          style="width: 180px"
        >
          <el-option
            v-for="item in winList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <!-- 内容 -->
    <div class="select-option">
      <div class="option-left">
        <div class="left-box">
          <div class="box-title">
            <div class="title1">
              <img src="../assets/img/ba1.png" alt="" />
            </div>
            <div class="title1">
              <img src="../assets/img/ba2.png" alt="" />
            </div>
            <div class="title1">
              <img src="../assets/img/ba3.png" alt="" />
            </div>
          </div>
          <!-- 靶子容器 -->
          <div class="box-detial">
            <!-- 每行靶子 -->

            <div
              class="item"
              v-for="(item, index) in bbchooseList"
              :key="index"
            >
              <div class="item-row">{{ item.name }}</div>
              <div class="item-row">
                <el-input v-model.number="item.count"></el-input>
              </div>
              <div class="item-row">{{ item.cmd }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="option-right">
        <div class="right-box">
          <div class="box-title">
            <div class="title1">
              <img src="../assets/img/ba4.png" alt="" />
            </div>
            <div class="title1">
              <img src="../assets/img/ba2.png" alt="" />
            </div>
            <div class="title1">
              <img src="../assets/img/ba3.png" alt="" />
            </div>
          </div>
          <!-- 靶子容器 -->
          <div class="box-detial">
            <!-- 每行靶子 -->
            <div
              class="item"
              v-for="(item, index) in bcchooseList"
              :key="index"
            >
              <div class="item-row">{{ item.type }}</div>
              <div class="item-row">
                <el-input v-model.number="item.number"></el-input>
              </div>
              <div class="item-row">1</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 提交 -->
    <div class="btn">
      <div class="submit" @click="submit">
        <img src="../assets/img/save.png" alt="" />
      </div>
      <div class="return" @click="exit">
        <img src="../assets/img/exit.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import {getConfig,getBaseConfig} from '../http/api'
import ScreenFull from "../components/ScreenFull.vue";
export default {
  name: "Home",
  components: {
    ScreenFull,
  },
  data() {
    return {
      // 靶标数据
      bbchooseList: [
        
      ],
      bcchooseList: [
        {
          type: "起倒靶",
          number: 0,
          tou: 1,
        },
        {
          type: "起倒靶",
          number: 0,
          tou: 1,
        },
        {
          type: "起倒靶",
          number: 0,
          tou: 1,
        },
        {
          type: "起倒靶",
          number: 0,
          tou: 1,
        },
      ],
      portList: [
      
      ],
      boteList: [
       
      ],
      winList: [
        {
          value:true,
          label:'是'
        },{
          value:false,
          label:'否'
        }
      ],
      // 命中
      win: "",
      // 端口号
      port: "",
      // 波特率
      bote: "",
      // 靶子数量
      number: "",
      // 选择的靶子数据
      xuan: [
        
      ],
    };
  },

  mounted() {
    // 获取是否显示此页面
    getConfig().then((res)=>{
      console.log(res);
      if(res === true){
        this.$router.push('index')
      }
    })
    // 获取详细数据
    getBaseConfig().then((res)=>{
      console.log(res);
      for(let i = 0; i < res.listPorts.length;i++){
        var obj = {}
        obj.value = res.listPorts[i]
        this.boteList.push(obj)
      }
      for(let i = 0; i < res.listComs.length; i++){
        var obj ={}
        obj.value = res.listComs[i]
        this.portList.push(obj)
      }

      this.bbchooseList = res.listTargetConfigs


      // for(let i = 0; i < 1; i++){
      //   var obj ={}
      //   obj.value = res.hasHited
      //   if(res.hasHited === false){
      //   obj.label = '否'

      //   }else{
      //   obj.label = '是'

      //   }
      //   this.winList.push(obj)
      // }
      // console.log(this.boteList);
      // console.log(this.winList);

      // this.portList = res.listPorts
    })
  },
  methods: {
    submit() {
      for (let i = 0; i < this.bbchooseList.length; i++) {
        if (this.bbchooseList[i].count > 0) {
          this.xuan.push(this.bbchooseList[i]);
        }
      }
      this.xuan.listPorts = this.bote;
      this.xuan.hasHited = this.win;
      this.xuan.listComs = this.port

      alert(JSON.stringify(this.xuan));
      console.log(this.xuan);

      // alert("点击了保存按钮");
      // console.log(this.bbchooseList);
      this.$router.push("index");
    },
    exit() {
      alert("点击了退出按钮");
    },
    // 关闭websocket
    // logout() {
    //   // localStorage.clear();
    //   localStorage.removeItem("token");
    //   this.$websocket.close();
    //   this.$store.dispatch("LogOut").then(() => {
    //     location.reload();
    //   });
    // },
  },
};
</script>

<style scoped lang="less">
.home-box {
  width: 100%;
  height: 100vh;
  background-image: url("../assets/img/home.png");
  background-size: 100% 100%;
  .screen {
    position: relative;
  }
  .selects {
    width: 1440px;
    height: 40px;
    margin: auto;
    position: relative;
    top: 180px;
    display: flex;
    justify-content: space-between;
    //修改的是el-input的样式
    //⼀种⽅法是设置最⾥层el-input__inner的背景⾊外层的两级⽗元素设置为透明⾊
    //另⼀种⽅法是从el-select到el-input__inenr的背景⾊都设置为需要的颜⾊
    /deep/ .el-select,
    /deep/ .el-input,
    /deep/ .el-input__inner {
      background-color: transparent;
      color: #fff;
      border: 0px;
      border-radius: 0px;
      text-align: center;
    }

    //修改单个的选项的样式
    /deep/ .el-select-dropdown__item {
      background-color: transparent;
      color: #fff;
    }
    //修改的是下拉框选项内容上⽅的尖⾓
    /deep/ .el-popper .popper__arrow,
    .el-popper .popper__arrow::after {
      display: none;
    }
    // 修改下拉框样式
    /deep/ .el-select-dropdown {
      background-color: transparent !important;
      border: none;
    }
    // 修改下拉框字体
    /deep/ .el-input__inner,
    .el-textarea__inner {
      font-size: 16px;
    }
    .box1 {
      width: 380px;
      height: 50px;
      background-image: url("../assets/img/select1.png");
      background-size: 100% 100%;
    }
    .aa {
      margin-left: 140px;
      margin-top: 6px;
    }
    .box2 {
      width: 380px;
      height: 50px;
      background-image: url("../assets/img/select2.png");
      background-size: 100% 100%;
    }
    .bb {
      margin-top: 6px;
      margin-left: 140px;
    }
    .box3 {
      width: 380px;
      height: 50px;
      background-image: url("../assets/img/select3.png");
      background-size: 100% 100%;
    }
    .cc {
      margin-top: 6px;
      margin-left: 190px;
    }
  }
  .select-option {
    width: 1440px;
    height: 540px;
    margin: 240px auto 50px;
    display: flex;
    justify-content: space-between;
    .option-left {
      width: 48%;
      height: 100%;
      background-image: url("../assets/img/main.png");
      background-size: 100% 100%;
      .left-box {
        width: 90%;
        height: 86%;
        margin: 50px 0 0 40px;
        .box-title {
          width: 90%;
          height: 50px;
          display: flex;
          justify-content: space-between;
          margin: auto;
        }
        .box-detial {
          width: 90%;
          height: 86%;
          margin: auto;
          margin-top: 10px;
          overflow-y: auto;
          .item {
            width: 100%;
            height: 40px;
            margin-bottom: 15px;
            display: flex;

            justify-content: space-between;
            .item-row {
              width: 150px;
              height: 100%;
              color: #fff;
              font-size: 18px;
              text-align: center;
              line-height: 40px;
              background-image: url("../assets/img/home-input.png");
              background-size: 90% 90%;
              // 不重复
              background-repeat: no-repeat;
              // 居中
              background-position: center;
              /deep/ .el-input {
                width: 100px;
                height: 30px;
              }
              // 修改输入框样式
              /deep/ .el-input__inner {
                height: 30px;
                font-size: 16px;
                color: #fff;
                border: none;
                background-color: transparent;
                line-height: 0px;
                text-align: center;
              }

              /deep/ input::placeholder {
                font-size: 14px;
              }
            }
          }
        }
      }
    }
    .option-right {
      width: 48%;
      height: 100%;
      background-image: url("../assets/img/main.png");
      background-size: 100% 100%;
      .right-box {
        width: 90%;
        height: 86%;
        margin: 50px 0 0 40px;
        .box-title {
          width: 90%;
          height: 50px;
          display: flex;
          justify-content: space-between;
          margin: auto;
        }
        .box-detial {
          width: 90%;
          height: 86%;
          margin: auto;
          margin-top: 10px;
          overflow-y: auto;
          .item {
            width: 100%;
            height: 40px;
            margin-bottom: 50px;
            display: flex;

            justify-content: space-between;
            .item-row {
              width: 150px;
              height: 100%;
              color: #fff;
              font-size: 18px;
              text-align: center;
              line-height: 40px;
              background-image: url("../assets/img/home-input.png");
              background-size: 90% 90%;
              // 不重复
              background-repeat: no-repeat;
              // 居中
              background-position: center;
              // 修改输入框样式
              /deep/ .el-input__inner {
                height: 30px;
                font-size: 16px;
                color: #fff;
                border: none;
                background-color: transparent;
                line-height: 0px;
                text-align: center;
              }

              /deep/ input::placeholder {
                font-size: 14px;
              }
            }
          }
        }
      }
    }
  }
  .btn {
    width: 500px;
    height: 50px;
    // background-color: red;
    margin: 70px auto;
    display: flex;
    justify-content: space-between;
    .submit {
      width: 200px;
      height: 100%;
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .return {
      width: 200px;
      height: 100;
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
<style lang="less" scoped>
@media screen and (max-width: 1300px) {
  .home-box {
    .selects {
      width: 700px;
      height: 50px;
      // background-color: aqua;
      top: 80px;
      .box1,
      .box2,
      .box3 {
        width: 220px;
        .aa,
        .bb,
        .cc {
          margin-left: 90px;
          margin-top: 6px;
        }
      }
      .el-select {
        width: 120px !important;
      }
    }
    .select-option {
      width: 700px;
      height: 280px;
      margin: 100px auto 10px;

      // background-color: red;
      .option-left {
        width: 48%;
        height: 100%;
        // background-color: rgb(58, 79, 202);

        .left-box {
          width: 92%;
          height: 70%;
          margin: 30px 0 0 20px;
          .box-title {
            height: 40px;
            .title1 {
              width: 110px;
              height: 100%;
              // background-color: red;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
          .box-detial {
            width: 90%;
            height: 86%;
            margin-top: 10px;
            .item {
              width: 100%;
              height: 40px;
              margin-bottom: 10px;
              .item-row {
                width: 110px;
                height: 90%;
                font-size: 16px;
                line-height: 35px;
              }
            }
          }
        }
      }
      .option-right {
        width: 48%;
        height: 100%;
        // background-color: rgb(58, 79, 202);
        .right-box {
          width: 92%;
          height: 70%;
          margin: 30px 0 0 20px;
          .box-title {
            height: 40px;
            .title1 {
              width: 110px;
              height: 100%;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
          .box-detial {
            .item {
              margin-bottom: 10px;
              .item-row {
                width: 110px;
                height: 90%;
                font-size: 16px;
                line-height: 35px;
              }
            }
          }
        }
      }
    }
    .btn {
      width: 380px;
      height: 50px;
      // background-color: red;
      margin: auto;
      display: flex;
      justify-content: space-between;
      .submit {
        width: 180px;
        height: 100%;
        cursor: pointer;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .return {
        width: 180px;
        height: 100;
        cursor: pointer;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
